<?php

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
?>
<script type='text/javascript'>
	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		$('#calendar').fullCalendar({
                      
			
			editable: false,
			<?php
                            //include_once('../Controlador/buscar_todos_eventos.php');
                            include_once('../Controlador/buscar_todos_eventos.php');
                         ?>
		
		});
		
	});
        
         $(function() {
             var titulo = $( "#Titulo" ),
                tipo = $( "#Tipo" ),
                ini = $( "#Ini" ),
                fin = $( "#Fin" ),
                descripcion = $( "#Descripcion" ),
                direccion = $( "#Direccion" ),
                recordatorio = $( "#Recordatorio" ),
                frec = $( "#Frec" ),
                allFields = $( [] ).add( titulo ).add( ini ).add( fin ).add( descripcion ).add( recordatorio ).add( direccion ),
                tips = $( ".validateTips" ); 
        
    function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}
                
    function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "El " + n + " no puede estar vacio" );
				return false;
			} else {
				return true;
			}
		}
     function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
       function checkClaves( a,b ) {
           if ( a.val() != b.val()) {
				a.addClass( "ui-state-error" );
                                b.addClass( "ui-state-error" );
				updateTips( "Las Claves no son iguales" );
				return false;
			} else {
				return true;
			}
		}
         $("#dialog-Crear").css("visibility","visible");      
    $( "#dialog-Crear" ).dialog({
			autoOpen: false,
			height: 500,
			width: 300,
			modal: true,
                   	buttons: {
				"Crear": function() {
                                    
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( titulo, "Titulo", 1, 800 );
                                        bValid = bValid && checkLength( ini, "Fecha Inicio", 1, 800 );
					
					if ( bValid ) {

                               
                                                $.post("../Controlador/crear_evento.php",{titulo:titulo.val(),tipo:tipo.val(),fecha:ini.val(),fechafin:fin.val(),ubicacion:direccion.val(),recordatorio:recordatorio.val(),frecuencia:frec.val(),descripcion:descripcion.val()},function(data){
                                                   
                                                     $( "#mostrar" ).html(data);
                                                     $( "#mostrar" ).dialog( "open" );
                                                });
          
						$( this ).dialog( "close" );
					}
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
                                updateTips( "" );
                                UpdateCal();
			}
		});
                
});
    $(function() {
		$("#Ini").datepicker();
                $("#Fin").datepicker();
                $("#Recordatorio").datepicker();

    });
        </script>
  <style type='text/css'>

	body {
/*		margin-top: 40px;*/
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		width: auto;
		margin: 0 auto;
		}

</style>

<div id='calendar' ondblclick="$( '#dialog-Crear').dialog( 'open' );"></div>
<div id="dialog-Crear" title="Crear Nuevo Evento">
	<p class="validateTips"></p>

	<form>
            <fieldset>
                    <label for="Titulo">Titulo</label>
                    <input type="text" name="Titulo" id="Titulo" class="text ui-widget-content ui-corner-all"/>
                    <label for="Tipo">Tipo</label>
                    <select id="Tipo" name="Tipo" class="text ui-widget-content ui-corner-all">
                        <option value="Cita">Cita</option>
                        <option value="Reunion">Reunion</option>
                        <option value="Viaje">Viaje</option>
                        <option value="Cumpleaños">Cumpleaños</option>
                        <option value="Otro">Otro</option>
                    </select>
                    <label for="Ini">Fecha Inicio</label>
                    <input type="text" name="Ini" id="Ini" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="Ini">Fecha Fin</label>
                    <input type="text" name="Fin" id="Fin" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="Descripcion">Descripcion</label>
                    <input type="text" name="Descripcion" id="Descripcion" class="text ui-widget-content ui-corner-all" />
                    <label for="Direccion">Direccion</label>
                    <input type="text" name="Direccion" id="Direccion" value="" class="text ui-widget-content ui-corner-all" />  
                    <label for="Recordatorio">Recordatorio</label>
                    <input type="text" name="Recordatorio" id="Recordatorio" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="Frec">Frecuencia</label>
                    <select id="Frec" name="Frec" class="text ui-widget-content ui-corner-all">
                        <option value="Una Vez">Una Vez</option>
                        <option value="Diaria">Diaria</option>
                        <option value="Semanal">Semanal</option>
                        <option value="Mensaual">Mensual</option>
                        <option value="Anual">Anual</option>
                    </select>
            </fieldset>
	</form>
    </div>